import { useImperativeHandle, forwardRef, useState, useEffect } from 'react'
import { PlusCircleOutlined } from '@ant-design/icons';
import { setMessageTemp } from '../operations';
import './style.less';

const MessageTempSelector = forwardRef((props: any, ref) => {
    const { value, onChange } = props;
    const [ifformItemError, setIfformItemError] = useState(false);

    useEffect(() => {
        if (ifformItemError == true && value) {
            setIfformItemError(false);
        }
    }, [value, ifformItemError]);

    useImperativeHandle(ref, () => ({
        setIfformItemError,
    }));

    return (
        <div className={`process-designer-message-template-select-wrapper ${ifformItemError ? 'error' : ''}`}>
            <div className='process-designer-message-template-select-process'>
                {value?.name || ''}
            </div>
            <div className='process-designer-message-template-select-icon'>
                <PlusCircleOutlined onClick={() => { setMessageTemp({ value, onChange }) }} />
            </div>
        </div>
    )
});

export default MessageTempSelector;